<template>
    <view>
        <!-- 排行榜 -->
        <block name="qu_rank">
            <view>
                <view class="rang_wrap" v-if="qu_rank_data.length > 0">
                    <view class="rang_item rang_item1">
                        <image class="rang_icon" src="/static/wxz_wzbagent/resource/images/order_ico/rank2.png"></image>
                        <view class="rank_head">
                            <image class="rang_uhead" mode="widthFix" :src="qu_rank_data[1]['team_img']"></image>
                        </view>
                        <view class="rang_name">{{ qu_rank_data[1]['team_name'] }}</view>
                        <view class="rang_vote_count">{{ qu_rank_data[1]['count'] }}</view>
                    </view>
                    <view class="rang_item rang_item2" :style="'background-color:' + themeColor.vrl.bg + ';'">
                        <view class="left_wing" :style="'border-color:' + themeColor.vrl.top_three.wing + ' transparent transparent;'"></view>
                        <view class="right_wing" :style="'border-color:' + themeColor.vrl.top_three.wing + ' transparent transparent;'"></view>
                        <image class="rang_icon" src="/static/wxz_wzbagent/resource/images/order_ico/rank1.png"></image>
                        <view class="rank_head">
                            <image class="rang_uhead" mode="widthFix" :src="qu_rank_data[0]['team_img']"></image>
                        </view>
                        <view class="rang_name">{{ qu_rank_data[0]['team_name'] }}</view>
                        <view class="rang_vote_count">{{ qu_rank_data[0]['count'] }}</view>
                    </view>
                    <view class="rang_item rang_item3" :style="'background-color:' + themeColor.vrl.bg + ';'">
                        <image class="rang_icon" src="/static/wxz_wzbagent/resource/images/order_ico/rank3.png"></image>
                        <view class="rank_head">
                            <image class="rang_uhead" mode="widthFix" :src="qu_rank_data[2]['team_img']"></image>
                        </view>
                        <view class="rang_name">{{ qu_rank_data[2]['team_name'] }}</view>
                        <view class="rang_vote_count">{{ qu_rank_data[2]['count'] }}</view>
                    </view>
                </view>
                <view class="user_rang t_c h4" v-if="qu_rank_data.length > 2">
                    <view class="rang_row fl w_100">
                        <view class="w_15">排名</view>
                        <view class="w_55">赛区名</view>
                        <view class="w_25">人气数</view>
                    </view>
                    <view class="rang_row fl w_100" v-if="index > 2" v-for="(item, index) in qu_rank_data" :key="index">
                        <view class="w_15">
                            <image class="rang_three" :src="'../../resource/images/order_ico/icon-' + (index + 1) + '@2x.png'" v-if="index + 1 > 3 && index + 1 <= 10"></image>
                            <text class="rang_num rad_3" v-else-if="index + 1 > 10">{{ index + 1 }}</text>
                        </view>

                        <view class="w_55 w_space">{{ item.team_name }}</view>

                        <view class="w_25">{{ item.count }}</view>
                    </view>
                </view>
            </view>
        </block>
    </view>
</template>

<script>
export default {
    data() {
        return {
            qu_rank_data: [],

            themeColor: {
                vrl: {
                    bg: '',

                    top_three: {
                        wing: ''
                    }
                }
            }
        };
    },
    methods: {}
};
</script>
<style>
@import './qu_rank.css';
</style>
